<template>
    <view class="goods-image-wrap">
        <swiper class="goods-image-swiper" :circular="true" @change="onChange">
            <swiper-item v-for="(item, index) in goodsAlbumList" :key="item.id">
                <image class="album-image" :src="global.FILE_DOMAIN + item.image_url" @click="preview(index)"></image>
            </swiper-item>
        </swiper>
        <!-- 指示点 -->
        <view class="indicator">
            <text v-for="(item, index) in goodsAlbumList" :key="item.id" class="dot"
                :class="{ active: index === activeIndex }"></text>
        </view>

        <!-- 计数器 -->
        <view class="counter">
            <text>{{ activeIndex + 1 }}</text>
            <text>/</text>
            <text class="counter-txt">{{ goodsAlbumList.length }}</text>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, inject } from 'vue'

const props = defineProps({
    'goodsAlbumList': {
        type: Array,
        default: []
    }
})

// 全局属性
const global = inject('global')

const activeIndex = ref(0)

// 当swiper下标发生变化时触发
const onChange = (e) => {
    activeIndex.value = e.detail.current
}

// ----------------------- 商品相册功能开始 --------------------------
const isShowPreview = ref(false)
// 预览轮播图
const preview = (index) => {
    isShowPreview.value = true
	uni.previewImage({
		current:index,
		urls: props.goodsAlbumList.map((value) => global.FILE_DOMAIN + value.image_url)
	})
}
// ----------------------- 商品相册功能结束 --------------------------
</script>

<style lang="scss">
/* 图片 */
.goods-image-wrap {
    height: 750rpx;
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    background-color: #efefef;
    .goods-image-swiper {
        height: 100%;
        .album-image {
            height: 100%;
            width: 100%;
        }
    }

    // 指示点
    .indicator {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 30rpx;
        display: flex;
        justify-content: center;

        .dot {
            width: 15rpx;
            height: 15rpx;
            margin: 0 18rpx;
            border-radius: 10rpx;
            background-color: rgba(255, 255, 255, 0.4);
        }

        .active {
            background-color: #f3514f;
        }
    }

    // 计数器
    .counter {
        position: absolute;
        right: 30rpx;
        bottom: 40rpx;
        width: 80rpx;
        height: 40rpx;
        line-height: 40rpx;
        border-radius: 20rpx;
        background-color: #ACADAF;
        text-align: center;
        color: #fff;
        .counter-txt {
            font-size: 24rpx;
        }
    }
}
</style>